<template>
  <div class="right-basic" @click="handleClick">
    <img src="/images/wuli/right/选中底.png" class="basic3-clicked" v-if="this.$store.state.gs_id==detail.company_code">
    <div class="gs-rank">
      <img v-if="index==1" src="/images/wuli/right/1.png">
      <img v-else-if="index==2" src="/images/wuli/right/2.png">
      <img v-else-if="index==3" src="/images/wuli/right/3.png">
      <!-- <img v-else src="/images/wuli/right/3以后.png"> -->
      <span class="span1" v-if="index<4">{{index}}</span>
      <span class="span2" v-else>{{index}}.</span>
    </div>
    <div class="gs-left">
      <div class="gs-title">
        <span class="gs-title-text">{{detail.company_name}}</span>
        <span class="gs-tag" :style="tagColor(detail.company_type)">{{detail.company_type.split('企业')[0]}}</span>
      </div>
      <!-- <div class="gs-add">地址：{{detail.area.replace('省','省 ').replaceAll('市','市 ')}}</div> -->
      <div class="gs-add">地址：{{address}}</div>


    </div>
    <div class="gs-right">
      <div class="raise-box">
        <img src="/images/wuli/right/上升@2x.png">
        <div>
          {{detail.total_score_gap  || detail.basic_score_gap || detail.business_score_gap || detail.innovat_score_gap || detail.social_score_gap || detail.risk_control_score_gap}}
          <span class="special">{{Number.parseFloat(detail.total_score || detail.basic_score || detail.business_score || detail.innovat_score || detail.social_score || detail.risk_control_score).toFixed(0)}}分</span>
        </div>
        <!-- <span>{{Number.parseFloat(detail.total_score || detail.basic_score || detail.business_score || detail.innovat_score || detail.social_score || detail.risk_control_score).toFixed(0)}}分</span> -->
      </div>
      <div class="text">上升名次</div>
    </div>

  </div>
</template>

<script>

export default {
  name: '',
  components: {},
  props: {
    detail: {
      type: [Object, Array, String], 
      required: true
    },
    index: {
      type: [Number, String], 
      required: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    address: function (){
      return this.detail.area.replace('省','省 ').replace('市','市 ').replace('市','市 ')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    tagColor(tag) {
      let c
      if(tag=='其它企业'){
        c = '#3EA5FF'
      }else if(tag=='胚芽企业'){
        c = '#009258'
      } else if(tag=='高成长企业'){
        c = '#DA72FF'
      }else {
        c = '#04CDF4'
      }
      return 'color:' +c+ ';border: 1px solid'+c+';'
    },
    handleClick() {
      // this.$store.commit('setId', this.detail.company_code)
      try {
        this.$store.dispatch('setId', this.detail.company_code)
      } catch (error) { 
        console.log('error: ',error)
      }
      // console.log(this.detail.company_code, this.$store.state.gs_id)
    }
  }
}
</script>

<style scoped lang="stylus">
.right-basic{
  cursor: pointer;
  z-index 999;
  position relative;
  width:100%;
  hight: 65px;
  display: flex;
  align-items: space-between;
  justify-content: space-between;
  margin: 18px 10px 0 0;
  // box-sizing: border-box;
  .gs-rank {
    position absolute;  
    top: 14px;
    left: -40px;
    .span1 {
      // width:50px;
      // text-align: center;
      position absolute;  
      top: -2px;
      left: 8px;
      font-size: 15px;
      font-weight: bold;
      color: #040D1E;
      line-height: 29px;
    }
    .span2 {
      display: inline-block;
      width:50px;
      text-align: center;
      position absolute;  
      top: -2px;
      left: -12px;
      font-size: 15px;
      font-weight: bold;
      color: #fff;
      line-height: 29px;
    }
  }
  .gs-left {
    border-right: 1px solid #707070;
    .gs-title {
      width: 250px;
      font-size: 16px;    
      font-weight: 500;
      color: #FFFFFF;
      line-height: 28px;
      display: flex;
      align-items: center;
      .gs-title-text {
        max-width: 175px;
        height: 28px;
        text-overflow: ellipsis;
        // display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        overflow: hidden;
        -webkit-line-clamp: 1;
      }
      .gs-tag {
        // box-sizing: border-box;
        margin-left: 8px;
        // width: 36px;
        padding: 0 10px;
        border: 1px solid #2E97FF;
        line-height: 18px;
        height: 18px;
        color: #3EA5FF;
        font-weight: bold;
        font-size: 10px;
        border-radius: 4px;
        text-align: center;
      }
    }
    .gs-add {
      font-weight: 400;
      color: #A5C7E7;
      line-height: 26px;
      font-size: 15px;
      text-overflow: ellipsis;
      max-width: 240px;
      // display: -webkit-box;
      -webkit-box-orient: vertical;
      white-space: nowrap;
      overflow: hidden;
      -webkit-line-clamp: 1;
    }
  }
  .gs-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    // width: 126px;
    height: 37px;
    margin: 0 auto;
    text-align: center;
    .raise-box {
      height: 26px;
      // width: 130px;
      img {
        // position absolute;
        // top: -2px;
        // left: 22px;
        width: 11px;     
        height: 18px;
      }
      div:nth-child(2) {
        margin-left: 3px;
        display: inline-block;
        // position relative;
        // top: -10px;
        // left: 35px;
        color: #00FFE5;
        font-size: 22px;
        line-height: 37px;
        // width: 80px;
        .special {
          position relative;

          top: -10px;
          // right: 2px;
          text-align: left;
          font-size: 15px;
          font-weight: 500;
          color: #00FFFF;
          line-height: 26px;
          // padding-bottom: 20px;
        }
      }

      // span:nth-child(3) {
      //   position absolute;
      //   top: -13px;
      //   left: 87px;
        
      //   font-size: 15px;
      //   font-weight: 500;
      //   color: #00FFFF;
      //   line-height: 26px;
      // }

    }
    .text {
      margin-top: 7px;
      color: #E0EDF9;
      line-height: 15px;
      font-size: 15px;
    }
  }
}
.basic3-clicked {
  position absolute;
  left: -57px;
  top: 0;
  z-index: -4;
}
</style>
